<div class="container">
  <div class="col-md-6 col-md-offset-3">
    <div class='panel panel-default'>
      <div class='panel-heading'>
        修改密码
      </div>
      <div class='panel-body'>
        <div class='form-group'>
          <label for='old_pass'>当前密码</label>
          <input class='form-control' type='password' id='old_pass' size='30' v-model="oldPassword"/>
        </div>
        <div class='form-group'>
          <label for='new_pass'>新密码</label>
          <input class='form-control' type='password' id='new_pass' size='30' v-model="newPassword"/>
        </div>
        <button type="submit" class="btn btn-primary" v-on:click="resetPassword()">保存</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';
  var userId = '<%= typeof(userId) !== "undefined" && userId ? userId : ""%>';

  var vue = new Vue({
    el: '#app',
    data: {
      oldPassword: '',
      newPassword: '',
      errorMsg: '',
      successMsg: ''
    },
    methods: {
      resetPassword() {
        vue.errorMsg = '';
        vue.successMsg = '';
        $.post(dataPrefix + '/user/' + userId + '/resetPassword',
          { appId: appId,
            _csrf: $('#_csrf').val(),
            oldPassword: vue.oldPassword,
            newPassword: vue.newPassword
          },
          function(result) {
            if (result.err) {
              vue.errorMsg = result.err;
              vue.successMsg = '';
              return;
            }

            vue.oldPassword = '';
            vue.newPassword = '';
            vue.successMsg = result.msg;
          });
      }
    }
  });
</script>
